<template>
  <div class="pageHeader-container">
    <div class="header-title" v-if="options.title">{{ options.title }}</div>
    <el-divider v-if="options.title"></el-divider>
    <div class="button-hub" v-if="options.buttonHub">
      <el-button
        type="primary"
        style="float: left"
        v-if="options.buttonHub.add"
        @click="add"
      >
        新建
      </el-button>
      <el-button
        type="primary"
        style="float: left"
        v-if="options.buttonHub.downloadXLS"
        @click="uploadXLS"
      >
        表格导入
      </el-button>
      <el-button
        style="float: left; margin-left: 10px"
        v-if="options.buttonHub.exampleXLS"
        @click="download"
      >
        示例表格下载
      </el-button>
      <el-button
        style="float: right; margin-left: 10px"
        v-if="options.buttonHub.search"
        @click="reset"
      >
        重置
      </el-button>
      <el-button
        type="primary"
        style="float: right"
        v-if="options.buttonHub.reset"
        @click="searchClick"
      >
        搜索
      </el-button>
    </div>

    <el-row>
      <el-col :span="5" class="search-grip" v-if="options.selectHub.select1">
        <span>{{ options.selectHub.select1.title }}</span>
        <el-input
          placeholder="请输入内容"
          v-model="values.value1"
          clearable
        ></el-input>
      </el-col>

      <el-col :span="8" class="search-grip" v-if="options.selectHub.select2">
        <span>{{ options.selectHub.select2.title }}</span>
        <el-date-picker
          v-model="values.value2.start"
          type="date"
          placeholder="选择开始时间"
          clearable
        ></el-date-picker>
        <el-date-picker
          v-model="values.value2.end"
          type="date"
          placeholder="选择结束时间"
          clearable
        ></el-date-picker>
      </el-col>

      <el-col :span="5" class="search-grip" v-if="options.selectHub.select3">
        <span>{{ options.selectHub.select3.title }}</span>
        <template v-if="options.selectHub.select3.isSlot">
          <slot name="select3"></slot>
        </template>
        <el-select
          v-else
          clearable
          v-model="values.value3"
          placeholder="请选择"
        >
          <el-option
            v-for="item in options.selectHub.select3.statusOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-col>

      <!-- style="width: 360px" -->
      <el-col :span="5" class="search-grip" v-if="options.selectHub.select4">
        <span>{{ options.selectHub.select4.title }}</span>
        <el-input
          :placeholder="
            options.selectHub.select4.placeholder
              ? options.selectHub.select4.placeholder
              : '请输入'
          "
          v-model="values.value4"
          clearable
        ></el-input>
      </el-col>

      <el-col :span="8" class="search-grip" v-if="options.selectHub.select5">
        <span>{{ options.selectHub.select5.title }}</span>
        <el-date-picker
          v-model="values.value5.start"
          type="date"
          placeholder="选择开始时间"
          clearable
        ></el-date-picker>
        <el-date-picker
          v-model="values.value5.end"
          type="date"
          placeholder="选择结束时间"
          clearable
        ></el-date-picker>
      </el-col>

      <el-col :span="5" class="search-grip" v-if="options.selectHub.select6">
        <span>{{ options.selectHub.select6.title }}</span>
        <el-select clearable v-model="values.value6" placeholder="请选择">
          <el-option
            v-for="item in options.selectHub.select6.statusOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-col>
      <el-row :span="8" class="search-grip">
        <slot></slot>
      </el-row>
    </el-row>
    <!-- <div class="select-hub" v-if="options.selectHub">
    </div> -->
  </div>
</template>
<script>
  import { reactive, computed } from '@vue/runtime-core'
  import { ElMessage } from 'element-plus'
  import { mapGetters } from 'vuex'
  import fileHook from '@/hooks/file.vue'
  import { uploadXlS } from '@/api/modules/upload'
  import common from '@/utils/common.js'
  // import moment from 'moment'
  export default {
    name: 'PageHeader',
    computed: {
      ...mapGetters(['token']),
    },
    props: { type: String, start: String, end: String },
    emits: ['searchChange', 'add', 'reset'],
    setup(props, context) {
      let values = reactive({
        value1: '',
        value2: {
          start: props.start ? props.start : null,
          end: props.end ? props.end : null,
        },
        value3: '',
        value4: '',
        value5: {
          start: props.start ? props.start : null,
          end: props.end ? props.end : null,
        },
      })

      let json = require('./config.json')
      let options = reactive(json[props.type])

      const searchClick = function () {
        const { start, end } = values.value2
        if (!(start && end) && (start || end)) {
          ElMessage.warning('请同时选择开始时间和结束时间')
          return
        }
        if (Date.parse(start) > Date.parse(end)) {
          ElMessage.error('您选取的结束时间大于开始时间，')
          return
        }

        context.emit('searchChange', values)
      }

      const add = function () {
        context.emit('add', values)
      }

      const reset = function () {
        console.log('重置')
        values.value1 = ''
        values.value2 = {
          start: props.start ? props.start : null,
          end: props.end ? props.end : null,
        }
        values.value3 = ''
        values.value4 = ''
        values.value5 = {
          start: props.start ? props.start : null,
          end: props.end ? props.end : null,
        }
        values.value6 = ''
        context.emit('reset')
      }

      const download = function () {
        let link = document.createElement('a') //创建a标签
        link.style.display = 'none' //使其隐藏
        //赋予文件下载地址
        link.href = 'http://103.90.155.18:9001/org/2021-07-190716.xlsx'
        link.setAttribute(
          'download',
          '机构人员管理批量导入模板表格（2021-07-19）'
        ) //设置下载属性 以及文件名
        document.body.appendChild(link) //a标签插至页面中
        link.click()
      }

      const { selXLS } = fileHook()
      const uploadXLS = async function () {
        const { base64, fileName } = await selXLS()
        common.XmLoading(true)
        uploadXlS(base64, 1, fileName)
          .then((res) => {
            common.XmLoading(false)
            common.XmMessage(0, '导入成功')
            context.emit('searchChange', values)
            // seachData()
          })
          .catch(() => common.XmLoading(false))
      }
      // 文件上传
      const uploadUrl = computed(() => {
        return process.env.VUE_APP_BASE_URL + '/emrweb/file/upload'
      })

      const uploadSuccess = function () {
        ElMessage.success('上传成功')
        searchClick()
      }

      const uploadErr = function () {}
      return {
        options,
        searchClick,
        values,
        add,
        reset,
        download,
        uploadUrl,
        uploadSuccess,
        uploadErr,
        uploadXLS,
      }
    },
  }
</script>
<style lang="scss" scoped>
  @import '@/styles/mixin.scss';
  .pageHeader-container {
    overflow: hidden;
    .header-title {
      margin-top: 20px;
      margin-left: 11px;
      font-weight: bold;
    }

    .button-hub {
      @include clearfix;
      margin-bottom: 24px;
      padding: 0 11px;
    }

    .select-hub {
      margin-bottom: 24px;
      padding: 0 11px;
      display: flex;
      align-items: center;
      flex-wrap: nowrap;
    }
    .search-grip {
      padding: 10px;
      display: flex;
      align-items: center;
      span {
        white-space: nowrap;
        margin-right: 10px;
      }
      :deep(.el-input) {
        display: inline-block;
        width: 100%;
      }
      :deep(.el-input__wrapper) {
        width: 100%;
      }
      .el-select {
        margin-left: 10px;
      }
      :deep(.el-date-editor) {
        margin-left: 10px;
      }
    }
  }
</style>
